<template>
  <div id='wrap'>
    <h1>路由基础知识点总结</h1>
    <p>查询字符串：{{ $route.query.id }}</p>
    <p>查询字符串：{{ $route.query.name }}</p>
    <RouterLink :to="{path:'/Scu33Son1',query:{id:'1',title:'新闻标题',content:'新闻内容'}}">第一个子组件：query传参</RouterLink>
    <RouterLink :to="{name:'scu33Son1'}">第一个子组件：query传参</RouterLink>
    <RouterLink :to="{name:'scu33Son2',params:{id:'2',title:'新闻标题',content:'新闻内容'}}">第二个子组件：params传参</RouterLink>
    <br>
    <button @click="Lpush">跳转第三个子组件</button>
    <button @click="Rpush">跳转第四个子组件</button>
    <RouterView />
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu33',
}
</script>

<script lang='ts' setup>
import { ref } from 'vue'
import { useRoute,useRouter } from "vue-router";
const route=useRoute()
const router=useRouter()
console.log(router);
console.log(route.query);
console.log(route.params);
const istrue=ref(true)
const Lpush=()=>{
  if(istrue.value){
    router.push({
      path:'/scu33Son3',
      query:{id:'1',title:'新闻标题',content:'新闻内容'}
    })
  }

}
const Rpush=()=>{
  if(istrue.value){
    router.push({
      path:'/scu33Son2',
      query:{id:'1',title:'新闻标题',content:'新闻内容'}
    })
  }
}
</script>

<style scoped lang='scss'>

</style>
